@import "@/common/constants/StyleConst.scss";

.Profile-container {
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  height: inherit;
  color: #565656;
  position: relative;

  .profile-title {
    color: #556282;
    position: absolute;
    font-size: 18px;
    font-weight: 700;
    left: 10px;
    top: -10px;
    z-index: 20;
    transform: translateY(-100%);
  }

  .toolbar {
    position: absolute;
    right: 18px;
    top: 12px;
    z-index: 20;

    .icon {
      &::before {
        color: #BABABC;
        font-size: 18px;
      }
    }
  }


  .profile-content {
    height: 100%;
    overflow-y: scroll;
    overflow-y: overlay;

    .name-text,
    .email-text {
      height: 22px;
      line-height: 22px;

      :deep .v-text-field.v-text-field--solo.v-input--dense {
        .v-input__control {
          min-height: 22px;
          height: 22px;
        }
      }
    }

    .name-text {
      font-size: 16px;
    }

    .email-text {
      font-size: 12px;

      :deep input {
        font-size: 12px;
      }

    }

    .list {
      flex-basis: unset;
    }

    .avatar {
      position: relative;
      overflow: unset;

      .avatar-decorate {
        position: absolute;
        right: 0px;
        bottom: 8px;
        width: 24px;
        height: 24px;
        font-size: 18px;
        color: #fff;
        background-color: $color-theme-orange;
        border-radius: 50%;
      }
    }

    .form {

      .line {
        flex: auto;
        margin-bottom: 10px;

        :deep .col {
          padding: 0 16px;

          .v-input__control {
            min-height: 28px;
          }

          .label { 
            height: 40px;
          }

          &.input-wrap {
            position: relative;
          }

          .warning-text {
            color: $color-theme-orange;
            position: absolute;
            bottom: 0;
            left: 16px;
            transform: translateY(100%);
          }
        }
      }

      .checkbox-group,
      .checkbox-group-card {
        .v-input--selection-controls {
          margin-top: 0;
        }

        .checkbox-label {
          flex: 1;
        }
      }

      .button-group {
        border-radius: 8px 8px 0 0;
        width: 100%;

        :deep .v-btn {
          width: 50%;
          min-height: 32px;
          height: 32px;
          text-transform: unset;

          .v-btn__content {
            justify-content: left;
          }
        }

        .active-btn {
          background-color: $color-theme-lightblue;
          color: #fff;

        }
      }

      .checkbox-group-card {
        .v-input--checkbox {
          padding: 10px 0;
          padding-left: 42px;
          border-bottom: 2px solid $color-theme-lightgrey;

          :deep .v-label {
            margin-left: 20px;
          }
        }
      }

      .locationCode-wrap {
        height: calc(100% - 32px);

        :deep .row {
          height: 100%;

          .col {
            height: 100%;
          }
        }

        .contact-table,
        .location-table {
          :deep .v-data-table-header {

            tr th {
              background-color: #DFE1E8;
              border: unset;
              font-weight: 700;
            }
          }

        }

        .contact-table {
          :deep tbody {

            tr:last-child {
              td {
                border-bottom: thin solid rgba(0, 0, 0, 0.12);
              }
            }

            td:last-child {
              border-right: thin solid rgba(0, 0, 0, 0.12);
            }
          }

        }

        :deep .location-table.theme--light.v-data-table {
          .v-data-table__wrapper {
            tbody {
              tr td {
                border: unset;
              }
            }
          }
        }
      }
    }
  }
}